<template>
  <div class="" v-init-screen-h="1">
    <el-card class="box-card top-card" shadow="hover">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="4">
            <el-radio-group v-model="checkType">
              <el-radio label="0">年</el-radio>
              <el-radio label="1">月</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="isDate"
              style="width:80%"
              size="mini"
              :type="checkType === '0' ? 'year' : 'month'"
              :placeholder="checkType === '0' ? '选择年' : '选择月'"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" @click="searchInfo"
              >查询</el-button
            >
            <el-button type="primary" size="mini" @click="resetInfo"
              >重置</el-button
            >
            <el-button type="primary" size="mini" @click="exportInfo"
              >导出</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div class="flex-x" style="height: 90%; width: 100%;padding:10px">
        <KWHchart
          ref="kwhRoll"
          style="width: 100%; margin-top: 10px; height: 100%"
        ></KWHchart>
        <Pricechart
          ref="priceRoll"
          style="width: 100%; margin-top: 10px; height: 100%"
        ></Pricechart>
      </div>
    </el-card>
    <el-card class="box-card top-card" shadow="hover" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>设备能耗</span>
      </div>
      <div style="width: 100%;height: 90%;padding:10px" ref="tableBox">
        <el-table
          :data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
          border
          ref="table"
          :summary-method="getSummaries"
          max-height="250"
          show-summary
          stripe
          size="small"
        >
          <el-table-column type="index" label="序号"> </el-table-column>
          <!-- <el-table-column prop="manufactureSite"
                       label="制造单元"> </el-table-column> -->
          <el-table-column prop="deviceToken" label="设备编号">
          </el-table-column>
          <el-table-column prop="deviceName" label="设备名称">
          </el-table-column>
          <el-table-column prop="peakKwh" label="峰时电量(Kw·h)">
          </el-table-column>
          <el-table-column prop="valleyKwh" label="谷时电量(Kw·h)">
          </el-table-column>
          <el-table-column prop="flatKwh" label="平时电量(Kw·h)">
          </el-table-column>
          <el-table-column prop="electricKwh" label="电量总值(Kw·h)">
          </el-table-column>
          <el-table-column prop="peakPrice" label="峰时电费(元)">
          </el-table-column>
          <el-table-column prop="valleyPrice" label="谷时电费(元)">
          </el-table-column>
          <el-table-column prop="flatPrice" label="平时电费(元)">
          </el-table-column>
          <el-table-column prop="electrovalencePrice" label="电费总值(元)">
          </el-table-column>
        </el-table>
        <Pagination
          @pagination="pagination"
          :total="tableData.length"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import TreeBox from "@/components/TreeBox";
import KWHchart from "./components/KWHchart.vue";
import Pricechart from "./components/Pricechart.vue";
import { currentDate3 } from "@/utils/currentDate";
import { getReportList, getChartList, exportData } from "@/api/energyManage";
export default {
  components: {
    TreeBox,
    KWHchart,
    Pricechart,
    Pagination
  },
  data() {
    return {
      showSearch: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizes: [10, 20],
      tableData: [],
      checkType: "0",
      isDate: "",
      chartInfo: {},
      searchForm: {}
    };
  },
  mounted() {
    this.isDate = new Date();
    this.searchInfo();
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      for (let i = 0; i < columns.length; i++) {
        sums.push("");
      }
      sums[0] = "共计";
      sums[1] = "/";
      sums[2] = "/";
      sums[3] = this.chartInfo["峰时电量"];
      sums[4] = this.chartInfo["谷时电量"];
      sums[5] = this.chartInfo["平时电量"];
      sums[6] =
        Number(this.chartInfo["峰时电量"]) +
        Number(this.chartInfo["谷时电量"]) +
        Number(this.chartInfo["平时电量"]);
      sums[7] = this.chartInfo["峰时电费"];
      sums[8] = this.chartInfo["谷时电费"];
      sums[9] = this.chartInfo["平时电费"];
      sums[10] =
        Number(this.chartInfo["峰时电费"]) +
        Number(this.chartInfo["谷时电费"]) +
        Number(this.chartInfo["平时电费"]);
      return sums;
    },
    searchInfo() {
      let params = {
        startDate: "",
        endDate: ""
      };
      if (this.checkType === "0") {
        params.startDate = currentDate3(
          this.$moment(this.isDate).format("YYYY") + "-01-01 00:00:00"
        );
        params.endDate = currentDate3(
          this.$moment(this.isDate).format("YYYY") + "-12-31 23:59:59"
        );
      } else {
        params.startDate = currentDate3(
          this.$moment(this.isDate).format("YYYY-MM") + "-01 00:00:00"
        );
        params.endDate = currentDate3(
          this.getLastDay(this.isDate) + " 23:59:59"
        );
      }
      this.searchForm = { ...params };
      getReportList(params).then(res => {
        this.tableData = res.data.table;
        for (let key in res.data.picture) {
          res.data.picture[key] = res.data.picture[key].toFixed(2);
        }
        this.chartInfo = res.data.picture;
        this.$refs.kwhRoll.setOpt(res.data.picture);
        this.$refs.priceRoll.setOpt(res.data.picture);
      });
    },
    //获取当前月最后一天
    getLastDay(date) {
      var year = date.getFullYear(); //获取年份
      var month = date.getMonth() + 1; //获取月份
      var lastDate = new Date(year, month, 0).getDate(); //获取当月最后一日
      month = month < 10 ? "0" + month : month; //月份补 0
      return [year, month, lastDate].join("-");
    },
    resetInfo() {
      this.checkType = "0";
      this.isDate = new Date();
      this.searchInfo();
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      // this.getList();
    },
    //导出及下载
    exportInfo() {
      exportData({ ...this.searchForm }).then(res => {
        var blob = new Blob([res.data], {
          type: "application/excel;chartset=UTF-8"
        });
        console.log(blob);
        const fileName = `能源报表-${this.$moment().format("YYYY-MM-DD")}.xls`;
        this.downloadFile(blob, fileName);
      });
    },
    downloadFile(blob, fileName, fileUrl) {
      var link = document.createElement("a");
      var body = document.querySelector("body");
      link.href = window.URL.createObjectURL(blob);
      if (fileName) {
        let len = fileName.split(".").length;
        if (len == 1 && fileUrl) {
          let suffix = fileUrl.split(".").splice(-1, 1)[0];
          link.download = fileName + "." + suffix;
        } else {
          link.download = fileName;
        }
      }
      // fix Firefox
      link.style.display = "none";
      body.appendChild(link);
      link.click();
      body.removeChild(link);
      window.URL.revokeObjectURL(link.href);
    }
  }
};
</script>

<style lang="scss" scoped>
.ener_box {
  /deep/ .el-card__header {
    padding: 10px;
  }
}
/deep/ .el-card__body {
  height: 100%;
}
.top-card {
  height: 48%;
}
.liStyle {
  line-height: 30px;
  width: 100%;
  display: flex; //设置flex布局，否则span标签无法设置宽度

  //设置宽度与表头列宽一致
  .title {
    &:first-child {
      border-left: 0;
    }
    border-right: 1px;
    color: #bcdbe9;
    // min-width: 80px;
    // max-width: 80px;
    height: 30px;
    line-height: 30px;

    font-size: 14px;
  }
  .title.progress_width {
    padding-left: 10px;
    /deep/ .el-progress {
      line-height: inherit;
      .el-progress-bar__outer {
        height: 16px !important;
        background-color: transparent;
        /* line-height: 30px; */
      }
    }
  }
  .text_align {
    text-align: left;
    padding-left: 10px;
  }
}
</style>
